<template>
	<gracePage :isSwitchPage="true" :isLoading="pageLoading" loadingBG="rgba(255,255,255,1)">
		<view slot="gHeader" style="padding:5rpx 25rpx;">
			<graceNavBar :items="tabs" :currentIndex="currentIndex" @change="navChange" 
			:size="180" activeFontSize="30rpx" lineHeight="70rpx" activeColor="#3688FF"></graceNavBar>
		</view>
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<swiper :style="{height:mainHeight+'px'}" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
					<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scroll="scroll" 
					@scrolltolower="scrollend" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
					<view style="padding:10rpx 0;">
						<graceReload ref="graceReload" width="700rpx" :reloadBgColor="['', '', '#3688FF']" 
						:reloadColor="['#999999', '#3688FF', '#FFFFFF']" 
						marginLeft="25rpx" @reload="reload"></graceReload>
						<graceArticleList :articles="news" @newstap="newstap"></graceArticleList>
						<graceLoading :loadingType="loadingTypes[newsIndex]"></graceLoading>
					</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
var demoData = require('../../graceUI/demoData/article.js');
var demoNews = demoData.articleList;
import gracePage from "../../graceUI/components/gracePage.vue";
import graceArticleList from "../../graceUI/components/graceArticleList.vue";
import graceLoading from "../../graceUI/components/graceLoading.vue";
import graceNavBar from "../../graceUI/components/graceNavBar.vue";
import graceReload from "../../graceUI/components/graceReload.vue";
export default {
	data() {
		return {
			// 列表区域高度
			mainHeight   : 350,
			// 分类数据
			tabsAll      : [],
			tabs         : [],
			currentIndex : 0,
			// 新闻信息保存数组
			newsAll      : [],
			// 每个选项卡对应的分页
			pages        : [],
			// 加载状态
			loadingTypes : [],
			// 每个滚动区域的滚动值
			scrollTops   : [],
			scrollTimer  : null,
			pageLoading  : true
		}
	},
	onLoad:function(){
		this.getNewsCate();
	},
	onReady:function(){
		uni.createSelectorQuery().select('#gBody').fields(
			{size: true}, (res) => {
				this.mainHeight = res.height;
				this.pageLoading = false;
			}
		).exec();
	},
	watch:{
		currentIndex : function (nVal, oldVal) {
			if(this.newsAll[this.currentIndex].length > 0){return ;}
			if((this.loadingTypes[this.currentIndex] == 3)){ this.getNews(); }
		}
	},
	methods: {
		// 导航切换
		navChange: function (e) {
			this.currentIndex = e;
		},
		swiperChange: function (e) {
			var index = e.detail.current;
			this.currentIndex = index;	
		},
		// 获取头部新闻分类 [ 数据应来自api ] 
		getNewsCate:function () {
			// 模拟 api 请求
			setTimeout(()=>{
				// 分类 api 的数据格式
				this.tabsAll = [{id:0,name:'热点推荐'},{id:1,name:'国内新闻'},{id:2,name:'国际新闻'},{id:3,name:'其他新闻'}];
				// 初始化新闻列表数组 元素数量与分类匹配
				for(var i = 0; i < this.tabsAll.length; i++){
					this.newsAll.push([]);
					this.tabs.push(this.tabsAll[i].name);
					this.pages.push(1);
					this.loadingTypes.push(3);
					this.scrollTops.push(0);
				}
				// 第一次加载新闻列表
				this.getNews();
			});
		},
		// 获取新闻列表 [ 数据应来自api ] 
		getNews : function(isReload){
			// 当前正在展示的 选项index 为 this.currentIndex
			// 那么分类 id 应该为 this.tabsAll[this.currentIndex].id
			//console.log('类型 : ' + this.tabs[this.currentIndex] + ' 第'+ this.pages[this.currentIndex] +'页');
			// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
			var currentIndex = this.currentIndex;
			this.loadingTypes.splice(currentIndex, 1, 1);
			// 组合请求地址, 如 网址/新闻分类id/页码
			console.log('http://.../api/news/index/'+this.tabsAll[this.currentIndex].id+'/'+this.pages[this.currentIndex]);
			// 模拟 api 请求结果
			setTimeout(()=>{
				if(isReload){
					setTimeout(()=>{
						this.$refs.graceReload[currentIndex].endReload();
					},300)
				}
				// 此处我们模拟第三页加载全部，实际情况请参考 
				// http://grace.hcoder.net/manual/info/139-30.html
				if(this.pages[currentIndex] >= 3){
					this.loadingTypes.splice(currentIndex, 1, 2);
					return ;
				}
				// 填充新闻数据
				if(this.pages[currentIndex] == 1){
					this.newsAll.splice(currentIndex, 1 , demoNews);
				}else{
					this.newsAll.splice(currentIndex,1, this.newsAll[currentIndex].concat(demoNews));
				}
				// 页码增加
				this.pages[currentIndex]++;
				this.loadingTypes.splice(currentIndex, 1, 3);
			}, 500);
		},
		// 滚动加载更多
		scrollend : function () {
			if(this.loadingTypes[this.currentIndex] != 3){ return false; }
			console.log('loadmore.....');
			this.getNews();
		},
		// 滚动记录
		scroll : function (e) {
			if(this.scrollTimer != null){clearTimeout(this.scrollTimer);}
			this.scrollTimer = setTimeout(()=>{
				this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
			}, 100);
		},
		// 手势数据传递
		touchstart : function (e){
			var touchObj = {scrollTop : this.scrollTops[this.currentIndex], moveY : e.changedTouches[0].pageY};
			this.$refs.graceReload[this.currentIndex].touchstart(touchObj);
		},
		touchmove : function (e) {
			var touchObj = {scrollTop : this.scrollTops[this.currentIndex], moveY : e.changedTouches[0].pageY};
			this.$refs.graceReload[this.currentIndex].touchmove(touchObj);
		},
		touchend : function (e) {
			var touchObj = {scrollTop : this.scrollTops[this.currentIndex], moveY : e.changedTouches[0].pageY};
			this.$refs.graceReload[this.currentIndex].touchend(touchObj);
		},
		// 下拉刷新
		reload:function(){
			this.pages[this.currentIndex] = 1;
			this.loadingTypes.splice(this.currentIndex, 1, 3);
			this.getNews(1);
		},
		// 新闻点击
		newstap : function (e) {
			// 获取新闻 id
			var newsId = e;
			console.log(newsId);
			// 打开新闻详情页面
			uni.navigateTo({url:"../artInfo/artInfo?newsId="+newsId});
		}
	},
	components:{
		graceArticleList,gracePage,graceLoading,graceNavBar,graceReload
	}
}
</script>
<style>
.grace-news-header{background-color:#FFFFFF; height:100rpx; padding:0 25rpx;}
</style>